<template>
  <!-- <div class="bor_b3" >
    <button  v-for="(item,i) in  ulrObj" :key="i" class="btn" @click="jumpPage(item.value)">{{ item.label}}</button>
  </div> -->
  <div class="header">
    vite练手小项目
  </div>
  <div class=" flex flex-wrap " >
        <div class="demo" v-loading lazy v-for="(item, i) in  ulrObj" :key="i" :label="item.label">
          <div @click="handleClick(item)" class="ripple demo-item">{{ item.label }}</div>
        </div>
  </div>
  
  <div class="common-layout">

    <el-container>
      <el-aside width="200px">
        <div class="asi">
          <!-- <el-scrollbar always height="100vh"> -->
          <!-- </el-scrollbar> -->
        </div>
      </el-aside>
      <el-container>
      
        <!-- <el-main> -->
          <!-- <el-scrollbar always height="86vh"> -->
            <!-- <router-view v-slot="{ Component }">
              <transition name="fade" enter-active-class="animate__animated animate__flipInY"
                leave-active-class="animate__animated animate__flipOutY" :duration="{ enter: 2000, leave: 1000 }">
                <component :is="Component" />
              </transition>
            </router-view> -->
          <!-- </el-scrollbar> -->
        <!-- </el-main> -->
      </el-container>
    </el-container>
  </div>



</template>

<script setup lang="ts">
import { useRouter, RouteRecordName } from 'vue-router'
import { reactive } from "vue";
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import type { todolist } from '../utils/js/type'
const instance = getCurrentInstance()
const router = useRouter()
const activeName = ref('init')
onMounted(() => {
  instance?.proxy?._loading.show('加载中...')

})

const handleClick = (item: todolist) => {
  nextTick(() => [
    router.push({
      name: item.value,
      query: {
        id: item.value
      }
    })
  ])

}


const ulrObj = reactive<todolist[]>([
  {
    label: 'ref',
    value: 'ref'
  },
  {
    label: 'reactive',
    value: 'reactive'
  },
  {
    label: 'toS',
    value: 'toS'
  }, {
    label: 'computed',
    value: 'computed'
  },
  {
    label: 'watch',
    value: 'watch'
  },
  {
    label: 'watchEffect',
    value: 'watchEffect'
  },
  {
    label: '组件与生命周期',
    value: 'components'
  },
  {
    label: 'less与scoped',
    value: 'less'
  },
  {
    label: '动态组件',
    value: 'donga'
  },
  {
    label: 'slot插槽',
    value: 'slot'
  },
  {
    label: '异步组件&代码分包',
    value: 'yibu'
  },
  {
    label: '传送组件Teleport',
    value: 'Teleport'
  },
  {
    label: 'transition组件',
    value: 'transition'
  },
  {
    label: 'transitionGroup',
    value: 'transitionGroup'
  },
  {
    label: '状态过渡',
    value: 'statusTransition'
  },
  {
    label: 'provide',
    value: 'provide'
  },
  {
    label: '兄弟组件传参和bus',
    value: 'XdCom'
  },
  {
    label: 'mitt库使用（vue3版eventBus）',
    value: 'mitt'
  },
  {
    label: 'tsx',
    value: 'tsx'
  },
  {
    label: '自定义指令demo',
    value: 'directive'
  },
  {
    label: '自定义Hooks加全局函数的使用',
    value: 'Hooks'
  },
  {
    label: '自定义插件',
    value: 'custom'
  },
  {
    label: 'css新特性',
    value: 'cssNew'
  },
  {
    label: 'eventLoop - nextTick',
    value: 'eventLoop-nextTick'
  },
  {
    label: '函数式编程',
    value: 'function'
  },
  {
    label: 'pinia使用（类似于vuex更简便）',
    value: 'pinia'
  }

])

</script>
<style scoped lang='less'>
//字体渐变动画
.tran {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(90deg,
      rgb(255, 167, 69),
      rgb(254, 134, 159),
      rgb(239, 122, 200),
      rgb(160, 131, 237),
      rgb(67, 174, 255),
      rgb(160, 131, 237),
      rgb(239, 122, 200),
      rgb(254, 134, 159),
      rgb(255, 167, 69));
  background-size: 200%;
  animation: streamer 2s linear infinite;
}

//居中
.cen {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}


.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

/* 渐变设置 */
.fade-enter-from,
.fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active {
  transition: all 0.7s ease;
}

.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}

:deep(#tab-reactive) {}

.icc {
  font-size: 50px;
}

.asi {
  padding-right: 10px;
  font-size: 25px;
  border-right: 5px solid #ccc;
}

.demo {
  &-item {
    font-size: 30px;
    flex-wrap: wrap;
    font-weight: 600;
    margin: 10px;
    border-radius: 12px;
    display: inline-block;
    padding: 10px;
    border: 1px solid #ccc;
    .cen;
    .tran;
    user-select: none;
  }

}

.el-header {
  padding: 0px;
  height: 9vh;
}

.header {
  border-bottom: 2px solid #CCC;
  font-size: 70px;
  .cen;
  .tran;
}

:deep(.el-scrollbar__thumb) {
  display: none;
}

.ic {

  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}

@keyframes streamer {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
  }
}

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .3s, opacity .5s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
</style>